<template>
  <div id="userManagement" v-loading = "loading" element-loading-text = "数据正在加载中">

    <template v-if="isSelect">

      <div class="top-div">
        <Top @addUser="addUser" @selectUser="selectUser" />
      </div>

      <div class="center-div">
        <Table :tableUserData="tableUserData" @changeLoad="changeLoad" @editUser="editUser" @selectUser="selectUser" />
      </div>

      <div class="bottom-div">
        <Bottom @tableUserDataFun="tableUserDataFun" @changeLoad="changeLoad" :selectParams = "selectParams"/>
      </div>

    </template>

    <template v-else>
      <router-view />
    </template>
    


  </div>
</template>

<script>

import Top from './components/top.vue'
import Table from './components/table.vue';
import Bottom from './components/bottom.vue';

export default {
    name: "userManagement",
    data() {
      return {
        tableUserData: [],
        loading: true,
        isSelect: true,
        selectParams: {}
      };
    },
    methods: {
      tableUserDataFun(formData) {
        this.tableUserData = formData 
      },
      changeLoad(load){
        this.loading = load
      },
      addUser() {
        this.isSelect = false
        this.$router.push({'name':"userManagementAddUser"})
      },
      editUser(row) {
        this.isSelect = false
        this.$router.push({'name':"userManagementEditUser",'params': row })
      },
      selectUser(params) {
        this.selectParams = JSON.parse(JSON.stringify(params))
      }
    },
    mounted() {
      // 解决如果在新增用户、更新用户界面 刷新页面，导致页面渲染出错
      if(!this.$router.history.current.meta.isSelect) {
        this.$router.push({name:'userManagement'})
      }
    },
    watch: {
      $route(to,from) {
        if(to.path === '/authority/userManagement') { 
          this.isSelect = true
        }
      }
    },
    components: { Top, Table, Bottom }
}
</script>

<style scoped lang="scss"> 

.top-div{
  display: inline-block;
  margin: 20px;
}

.center-div {

}

.bottom-div {
  height: 5vh;
}

 
</style>
